<script setup lang="ts">
  import { onMounted, ref } from "vue";
  import { useOrderStore } from "@/stores";
  import { useRoute } from "vue-router";

  const orderStore = useOrderStore();
  const route = useRoute();
  const order = ref<any>({});

  onMounted(async () => {
    order.value = await orderStore.getOrderDetail({
      id: Number(route.params.id),
    });
  });
</script>

<template>
  <div class="page-container">
    <Breadcrumb :items="['订单管理', '订单列表', '订单详情']"></Breadcrumb>
    <a-card :bordered="false">
      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px">
        <div style="font-size: 18px; font-weight: bold">订单信息</div>
        <a-button type="primary" size="small">订单核销</a-button>
      </div>
      <a-descriptions size="large" bordered>
        <a-descriptions-item label="订单编号">{{ order.code }}</a-descriptions-item>
        <a-descriptions-item label="订单状态">
          <Tag group="order_status" :value="order.statusValue" />
        </a-descriptions-item>
        <a-descriptions-item label="支付金额">{{ order.payableAmount }}</a-descriptions-item>
        <a-descriptions-item label="实付金额">{{ order.paidAmount }}</a-descriptions-item>
        <a-descriptions-item label="下单时间">{{ order.createdAt }}</a-descriptions-item>
        <a-descriptions-item label="支付时间">123123213</a-descriptions-item>
      </a-descriptions>
      <a-divider></a-divider>
      <a-card>
        <a-tabs default-active-key="1">
          <a-tab-pane key="1" title="订单商品">
            <a-table :data="order.orderProducts" :pagination="false">
              <template #columns>
                <a-table-column title="商品主图" data-index="coverFileId" />
                <a-table-column title="商品名称" data-index="productName" />
                <a-table-column title="商品金额" data-index="productPrice" />
                <a-table-column title="商品数量" data-index="quantity" />
              </template>
            </a-table>
          </a-tab-pane>
          <a-tab-pane key="2" title="支付记录">
            <a-table :data="order.payments" :pagination="false">
              <template #columns>
                <a-table-column title="支付编号" data-index="code" />
                <a-table-column title="商品金额" data-index="amount" />
                <a-table-column title="支付状态" data-index="statusValue" />
              </template>
            </a-table>
          </a-tab-pane>
        </a-tabs>
      </a-card>
    </a-card>
  </div>
</template>
